<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title></title>
		<script type="text/javascript" src="../../../js/selfjs/echarts.min.js"></script>
		<link rel="stylesheet" href="../../../js/layui/layui/css/layui.css" media="all" />		
		<link rel="stylesheet" href="../../../js/selfcss/main.css" />
		<link rel="stylesheet" type="text/css" href="../../../js/easyui/themes/bootstrap/easyui.css">
		<link rel="stylesheet" type="text/css" href="../../../js/easyui/themes/icon.css">
		<link rel="stylesheet" type="text/css" href="../../../js/selfcss/demo.css">
		<script type="text/javascript" src="../../../js/easyui/jquery.min.js"></script>	
		<script type="text/javascript" src="../../../js/easyui/jquery.easyui.min.js"></script> 
	</head>

	<body>
	    <div class="layui-field-box" style="width:90%;height:50px;" >
    		<select id="applicationId" class="easyui-combogrid" style="width:150px;float: right;" data-options="
                    panelWidth: 500,
                    idField: 'id',
                    textField: 'applicationName',
                    url: '../../../searchIndexSystemApplications',
                    method: 'get',
                    columns: [[
                        {field:'applicationName',title:'应用名称',width:80},
                        {field:'applicationHost',title:'应用主机',width:100},
                        {field:'applicationPort',title:'应用端口',width:100,align:'right'}
                    ]],
                    fitColumns: true,
                    pagination:true,
                    labelPosition: 'top'
                " name="applicationId">
            </select>	
  		 </div> 
		<fieldset class="layui-elem-field">
		 <legend>CPU 监控</legend>
		 <div class="layui-field-box" style="width:90%;height:200px;" id="cpu">
    			
  		 </div>
		</fieldset>
		<fieldset class="layui-elem-field">
  		<legend>JVM内存监控</legend>
  		<div class="layui-field-box" style="width:90%;height:200px;" id="jvmheap">
    			
  		</div>
  		<div class="layui-field-box" style="width:90%;height:200px;" id="jvminfo">
    			
  		</div>
  		<div class="layui-field-box" style="width:90%;height:80px;" id="jvmGarbage">
    		<table id="tablelist1" class="easyui-datagrid"  style="width:auto;" fitcolumns="true" fit="true" 
			data-options="pagination:false,method:'get'">
				<thead>
					<tr>
						<th data-options="field:'youngCollectionCount',width:80,align:'center'">年轻代回收次数</th>
						<th data-options="field:'youngCollectionTime',width:100,align:'center'">年轻代回收时间(ms)</th>
						<th data-options="field:'oldCollectionCount',width:100,align:'center'">老年代回收次数</th>
						<th data-options="field:'oldCollectionTime',width:100,align:'center'">老年代回收时间(ms)</th>
					</tr>
				</thead>
			</table>	
  		</div>
  		</fieldset>
  		
  		<fieldset class="layui-elem-field">
  		<legend>JVM线程监控</legend>
  		<div class="layui-field-box" style="width:90%;height:200px;" id="jvmThread">
    			
  		</div>
  		</fieldset>
  		<fieldset class="layui-elem-field">
  		<legend>JVM CassLoader监控</legend>
  		<div class="layui-field-box" style="width:90%;height:200px;" id="jvmCassLoader">
    			
  		</div>
  		</fieldset>
		<fieldset class="layui-elem-field">
  		<legend>TOMCAT监控</legend>
  		<div class="layui-field-box" style="width:90%;height:200px;float: left" id="thread">
    			
  		</div>

  		</fieldset>
  		<fieldset class="layui-elem-field">
  		<legend>QUARTZ 监控</legend>
  		<div class="layui-field-box" style="width:90%;height:200px;float: left" id="zookeeper">
    		<table id="tablelist" class="easyui-datagrid"  style="width:auto;" fitcolumns="true" fit="true" 
			data-options="pagination:false,method:'get'">
				<thead>
					<tr>
						<th data-options="field:'schedulerInstanceId',width:80,align:'center'">schedulerInstanceId</th>
						<th data-options="field:'schedulerName',width:100,align:'center'">schedulerName</th>
						<th data-options="field:'threadPoolClassName',width:100,align:'center'">threadPoolClassName</th>
						<th data-options="field:'threadPoolSize',width:100,align:'center'">threadPoolSize</th>
						<th data-options="field:'statusName',width:100,align:'center'">statusName</th>
						<th data-options="field:'version',width:150,align:'center'">version</th>
					</tr>
				</thead>
			</table>	
  		</div>
  		</fieldset>
  		<script type="text/javascript">
        var threadChart = echarts.init(document.getElementById('thread'));
        var jvmthreadChart = echarts.init(document.getElementById('jvmThread'));
        var jvmCassLoaderChart = echarts.init(document.getElementById('jvmCassLoader'));
        var cpuChart = echarts.init(document.getElementById('cpu'));
        var jvmheapChart = echarts.init(document.getElementById('jvmheap'));
        var jvminfoChart=echarts.init(document.getElementById('jvminfo'))
        // 使用刚指定的配置项和数据显示图表。
		function setData(){
        	 	var applicationId = $('#applicationId').combogrid('getValue');
        	 	if(applicationId){
        	 		var url="../../../"+applicationId+"/searchEChartsObject"
        	 		$.getJSON(url, function (data) {  
    		            if (data) {  
    		            	threadChart.setOption(data.tomcatThreadOption,true); 
    		            	jvmthreadChart.setOption(data.jvmThreadOption,true);
    		            	jvmCassLoaderChart.setOption(data.jvmClassLoaderOption,true); 
    		            	jvmheapChart.setOption(data.jvmUsedOption,true);  
    		            	jvminfoChart.setOption(data.jvmInfoOption,true);
    		            	cpuChart.setOption(data.cpuUsedOption,true);  
    		            	$('#tablelist').datagrid({
    		            		data:data.quartzRuntimeDataGridObject 
    		            	});
    		            	$('#tablelist1').datagrid({
    		            		data:data.heapMemroryGarbageObject 
    		            	});
    		            } 
    		        });
        	 	}
				

			}
			window.onload=function(){
				setInterval(setData,5000);
			}
		</script>	
	</body>
	
</html>